<template>
  <uni-forms ref="formRef" :model="formData" class="" :rules="rules">
    <uni-forms-item label-position="top" name="stock_symbol">
      <template label>
        <text class="flex pb-2">股票代码</text>
      </template>
      <uni-easyinput
        v-model="formData.stock_symbol"
        placeholder="请输入股票代码，支持批量，用,隔开。"
      ></uni-easyinput>
    </uni-forms-item>

    <uni-forms-item label-position="top">
      <template label>
        <text class="flex pb-2">分析日期</text>
      </template>
      <uni-datetime-picker
        type="date"
        :clear-icon="false"
        v-model="formData.analysis_date"
      />
    </uni-forms-item>

    <uni-forms-item label-position="top">
      <template label>
        <text class="flex pb-2">选择分析师</text>
      </template>
      <uni-data-checkbox
        class="analystor-checkbox"
        min="1"
        max="4"
        mode="tag"
        multiple
        v-model="formData.analysts"
        :localdata="analystor"
      ></uni-data-checkbox>
    </uni-forms-item>

    <uni-forms-item label-position="top">
      <template label>
        <text class="flex pb-2">研究深度</text>
      </template>
      <slider
        :value="formData.research_depth"
        min="1"
        max="5"
        step="1"
        show-value
        activeColor="#007AFF"
      />
    </uni-forms-item>

    <uni-forms-item label-position="top">
      <template label>
        <text class="flex pb-2">市场类型</text>
      </template>

      <uni-data-checkbox
        mode="tag"
        class="market-checkbox"
        v-model="formData.market_type"
        :localdata="market_type"
      ></uni-data-checkbox>
    </uni-forms-item>

    <button
      class="w-full box-border p-3.5 bg-blue-500 text-white border-none rounded-lg text-base font-medium cursor-pointer transition-all duration-300 active:bg-blue-700 active:translate-y-[-2px] active:shadow-[0_4px_8px_rgba(0,0,0,0.1)]"
      @click="submit"
    >
      开始分析
    </button>
  </uni-forms>
</template>

<script setup lang="ts">
import uniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import uniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import uniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import uniDatetimePicker from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import uniDataCheckbox from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";

import { ref, defineOptions } from "vue";
import { buildRequests } from "../api";

defineOptions({
  options: {
    styleIsolation: "shared",
  },
});

const analystor = ref([
  {
    text: "市场分析师",
    value: "market",
  },
  {
    text: "社交媒体分析",
    value: "social",
  },
  {
    text: "新闻分析师",
    value: "news",
  },
  {
    text: "基本面分析师",
    value: "fundamentals",
  },
]);

const market_type = ref([
  {
    text: "A股",
    value: "A股",
  },
  {
    text: "港股",
    value: "港股",
  },
  {
    text: "美股",
    value: "美股",
  },
]);

const rules = ref({
  stock_symbol: {
    rules: [{ required: true, errorMessage: "请输入股票代码" }],
  },
});

const formRef = ref(null);

const formData = ref({
  stock_symbol: "",
  analysis_date: Date.now(),

  analysts: ["market", "fundamentals"],
  research_depth: 3,
  market_type: "A股",
});

const submit = async () => {
  const valid = await formRef.value?.validate();
  if (!valid) {
    return;
  }

  try {
    const requests = buildRequests(formData.value);
    console.log(JSON.stringify(requests));
  } catch (e) {
    uni.showToast({
      title: `error:${(e as Error).message ?? String(e)}`,
      position: "top",
      icon: "error",
      duration: 3000,
    });
  }
};
</script>

<style lang="scss" scoped>
.analystor-checkbox {
  display: flex;
  ::v-deep {
    .uni-data-checklist {
      .checklist-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .checklist-box {
          margin-right: 0;
          border-radius: 8px;
          padding: 12px;
          flex: 0 0 calc(45% - 10px);
          .checklist-content {
            justify-content: center;
          }
        }
      }
    }
  }
}

.market-checkbox {
  ::v-deep {
    .checklist-group {
      justify-content: space-between;
      gap: 10px;
      .checklist-box {
        margin-right: 0;
        border-radius: 8px;
        padding: 12px;
        flex: 1;
        .checklist-content {
          justify-content: center;
        }
      }
    }
  }
}
</style>
